import React, { memo } from "react";
import { useSelector, shallowEqual } from "react-redux";
import { UserHomeWrap } from "./style";
import UserAudio from "./userAudio";
import UserListenRank from "./userListenRank";
import UserCreateSong from "./userCreateSong";
import DocumentTitle from "react-document-title";

export default memo(function UserHome(props) {
  const { userDetailInfo } = useSelector(
    (state) => ({
      userDetailInfo: state.getIn(["userInfo", "userDetailInfo"]),
    }),
    shallowEqual
  );

  const name =
    userDetailInfo.length !== 0
      ? userDetailInfo.profile
        ? userDetailInfo.profile.nickname
        : ""
      : "";

  return (
    <DocumentTitle title={name + " - 用户 - 网易云音乐"}>
      <UserHomeWrap>
        <UserAudio id={props.location.search.split("=")[1]} />
        {userDetailInfo.peopleCanSeeMyPlayRecord ? (
          <UserListenRank id={props.location.search.split("=")[1]} />
        ) : (
          <React.Fragment></React.Fragment>
        )}

        <UserCreateSong id={props.location.search.split("=")[1]} />
      </UserHomeWrap>
    </DocumentTitle>
  );
});
